<template>
  <v-card class="like-card rounded-lg" elevation="0">
    <v-card-title class="text-h5 font-weight-medium mb-2">关注与粉丝</v-card-title>
    
    <!-- 选项卡 -->
    <v-tabs 
      v-model="currentType" 
      color="#7C9CBF" 
      bg-color="rgba(30, 31, 42, 0.3)"
      slider-color="#7C9CBF"
      align-tabs="center"
      height="54"
      class="tabs-container mb-4"
      @update:model-value="getLike"
    >
      <v-tab value="follows" class="tab-item">
        <v-icon class="mr-2">mdi-account-group</v-icon>
        我的关注
      </v-tab>
      <v-tab value="fans" class="tab-item">
        <v-icon class="mr-2">mdi-account-multiple</v-icon>
        我的粉丝
      </v-tab>
    </v-tabs>
    
    <!-- 用户列表 -->
    <v-slide-y-transition mode="out-in">
      <div :key="currentType">
        <div v-if="currentItems.length > 0" class="users-list">
          <v-list lines="two" class="py-0 bg-transparent">
            <v-slide-y-transition group>
              <div v-for="(item, index) in currentItems" :key="item.id" class="list-item-wrapper">
                <v-hover v-slot="{ isHovering, props }">
                  <v-list-item 
                    v-bind="props"
                    :to="`/user?lookId=${item.id}`" 
                    :title="item.nickName" 
                    :subtitle="item.description || '这个人很懒，没有任何描述'"
                    class="user-list-item my-1 rounded-lg"
                    :class="{ 'item-hover': isHovering }"
                  >
                    <template v-slot:prepend>
                      <div class="avatar-wrapper mr-3">
                        <v-avatar size="60" :image="item.avatar ? apiFileGet(item.avatar) : '/logo.png'" class="user-avatar">
                          <v-icon v-if="!item.avatar" size="24" color="white">{{ item.sex ? 'mdi-human-male' : 'mdi-human-female' }}</v-icon>
                        </v-avatar>
                        <div class="avatar-border" :class="item.sex ? 'male-border' : 'female-border'"></div>
                      </div>
                    </template>

                    <template v-slot:append>
                      <v-btn 
                        @click.stop
                        :color="currentType == 'fans' ? (item.each ? '#7C9CBF' : '#A3C4E9') : '#7C9CBF'"
                        :variant="currentType == 'fans' ? (item.each ? 'outlined' : 'elevated') : 'outlined'"
                        @click="unLikeOrLike(item.id)" 
                        class="follow-btn"
                        rounded
                        size="small"
                      >
                        <v-icon size="small" class="mr-1">
                          {{ currentType == 'fans' ? (item.each ? 'mdi-account-remove' : 'mdi-account-plus') : 'mdi-account-remove' }}
                        </v-icon>
                        {{ currentType == 'fans' ? (item.each ? '取消互关' : '互相关注') : '取消关注' }}
                      </v-btn>
                    </template>
                  </v-list-item>
                </v-hover>
                <v-divider v-if="index < currentItems.length - 1" class="my-2 opacity-30"></v-divider>
              </div>
            </v-slide-y-transition>
          </v-list>
          
          <!-- 分页 -->
          <div class="d-flex justify-center mt-6" v-if="pageInfo.pages > 1">
            <v-pagination
              v-model="pageInfo.page"
              :length="pageInfo.pages"
              :total-visible="5"
              rounded="circle"
              color="#7C9CBF"
              class="pagination-control"
            ></v-pagination>
          </div>
        </div>
        
        <!-- 空状态 -->
        <v-container v-else class="d-flex flex-column align-center justify-center empty-state py-12">
          <v-icon
            :icon="currentType === 'follows' ? 'mdi-account-group' : 'mdi-account-multiple'"
            size="100"
            color="grey-darken-1"
            class="mb-5 empty-icon"
          ></v-icon>
          <div class="text-h5 text-grey-darken-1 mb-2">
            {{ currentType === 'follows' ? '暂无关注' : '暂无粉丝' }}
          </div>
          <div class="text-body-1 text-grey text-center mb-6">
            {{ currentType === 'follows' ? '您还没有关注任何人' : '还没有人关注您' }}
            <br>
            {{ currentType === 'follows' ? '浏览并关注您感兴趣的创作者吧' : '分享精彩视频，吸引更多粉丝' }}
          </div>
          <v-btn
            to="/"
            color="#7C9CBF"
            variant="flat"
            :prepend-icon="currentType === 'follows' ? 'mdi-magnify' : 'mdi-video-box'"
            class="explore-btn"
            rounded
          >
            {{ currentType === 'follows' ? '去发现创作者' : '去上传视频' }}
          </v-btn>
        </v-container>
      </div>
    </v-slide-y-transition>
    
    <!-- 加载状态 -->
    <v-container v-if="loading" class="d-flex flex-column align-center justify-center loading-state py-12">
      <v-progress-circular
        indeterminate
        color="#7C9CBF"
        size="64"
        class="mb-4"
      ></v-progress-circular>
      <div class="text-body-1 text-grey">
        正在加载{{ currentType === 'follows' ? '关注' : '粉丝' }}列表...
      </div>
    </v-container>

    <!-- 消息提示 -->
    <v-snackbar v-model="snackbar.show" :color="snackbar.color || 'info'" location="top" rounded="pill">
      {{ snackbar.text }}
      <template v-slot:actions>
        <v-btn icon="mdi-close" variant="text" @click="snackbar.show = false"></v-btn>
      </template>
    </v-snackbar>
  </v-card>
</template>

<script setup>
import { ref, watch } from 'vue';
import { apiFileGet } from '../../../apis/file';
import { apiFollows, apiGetLike } from '../../../apis/user/like';
import { useUserStore } from '../../../stores';

const currentType = ref("fans")
const currentItems = ref([])
const loading = ref(false)
const snackbar = ref({
  show: false,
  text: "",
  color: ""
})
const pageInfo = ref({
  page: 1,
  pages: 0
})
const userStore = useUserStore()

/**
 * 获取关注/粉丝
 */
const getLike = () => {
  currentItems.value = []
  loading.value = true
  
  apiGetLike(currentType.value, userStore.lookId, pageInfo.value.page).then(({ data }) => {
    loading.value = false
    
    if (!data.state) {
      snackbar.value = {
        text: "获取数据失败",
        show: true,
        color: "error"
      }
      return;
    }
    
    currentItems.value = data.data.records
    pageInfo.value.pages = data.data.pages || 0
    
    if (data.data.records.length === 0 && pageInfo.value.page > 1) {
      pageInfo.value.page = 1
      getLike()
    }
  }).catch(error => {
    loading.value = false
    snackbar.value = {
      text: "获取数据失败，请稍后重试",
      show: true,
      color: "error"
    }
    console.error("获取关注/粉丝数据失败：", error)
  })
}

/**
 * 关注/取消关注
 */
const unLikeOrLike = (id) => {
  apiFollows(id).then(({ data }) => {
    snackbar.value = {
      text: data.message,
      show: true,
      color: data.state ? "success" : "error"
    }
    
    if (!data.state) {
      return;
    }
    
    // 关注/取消关注成功后重新获取列表
    getLike()
  }).catch(error => {
    snackbar.value = {
      text: "操作失败，请稍后重试",
      show: true,
      color: "error"
    }
    console.error("关注/取消关注失败：", error)
  })
}

// 监听页码变化，重新获取数据
watch(() => pageInfo.value.page, () => {
  getLike()
}, { immediate: true })

// 监听关注类型变化，重置页码
watch(() => currentType.value, () => {
  pageInfo.value.page = 1
})
</script>

<style scoped>
.like-card {
  background-color: transparent;
  min-height: 400px;
  position: relative;
}

.tabs-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.user-list-item {
  background-color: rgba(30, 31, 42, 0.4);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.item-hover {
  background-color: rgba(30, 31, 42, 0.7) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.avatar-wrapper {
  position: relative;
}

.user-avatar {
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.list-item-wrapper:hover .user-avatar {
  transform: scale(1.05);
}

.avatar-border {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.male-border {
  background: linear-gradient(135deg, #5B8DEF, #7C9CBF) border-box;
}

.female-border {
  background: linear-gradient(135deg, #E98BBF, #F1B7D7) border-box;
}

.follow-btn {
  transition: all 0.3s ease;
}

.follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.pagination-control {
  background-color: rgba(30, 31, 42, 0.5);
  border-radius: 30px;
  padding: 5px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.empty-state, .loading-state {
  min-height: 400px;
}

.empty-icon {
  opacity: 0.6;
  animation: pulse 3s infinite ease-in-out;
}

.explore-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.explore-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.6;
  }
}

/* 响应式设计调整 */
@media (max-width: 600px) {
  .user-avatar {
    width: 50px !important;
    height: 50px !important;
  }
  
  .empty-icon {
    font-size: 80px;
  }
  
  .follow-btn {
    font-size: 0.8rem;
  }
}
</style>